<template>
  <el-card>
    <div>
      <div style="margin-bottom: 15px">
        <el-input
          style="width: 20%; margin-top: 10px; margin-left: 10px"
          v-model="search"
          placeholder="商品名关键字"
        >
          <el-button slot="append" icon="el-icon-search" />
        </el-input>
      </div>
      <el-table
        :default-sort="{ prop: 'price', order: 'ascending' }"
        :data="
          tableData.filter(
            (data) =>
              !search ||
              data.shopName.toLowerCase().includes(search.toLowerCase())
          )
        "
        fit
        highlight-current-row
        current-row-key
        stripe
        border
        style="width: 100%"
        :row-style="{ height: '80px' }"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.shopName }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <span>{{ props.row.shopperName }}</span>
              </el-form-item>
              <el-form-item type="index" label="商品ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="商品价格">
                <span>{{ props.row.price }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{{ props.row.title }}</span>
              </el-form-item>
              <el-form-item label="商品库存">
                <span>{{ props.row.num }}</span>
              </el-form-item>
              <el-form-item label="商品图片">
                <el-image
                  :src="props.row.photo"
                  style="width: 150px; height: auto"
                  :preview-src-list="srclist"
                  title="商品图片"
                  alt="图片加载失败"
                ></el-image>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="序号" align="center" type="index">
        </el-table-column>
        <el-table-column label="商品名称" align="center" prop="shopName">
        </el-table-column>
        <el-table-column label="商品图片" align="center" prop="photo">
          <template scope="scope">
            <el-image
              :src="scope.row.photo"
              style="width: 150px; height: auto"
              :preview-src-list="srclist"
              title="商品图片"
              alt="图片加载失败"
            />
          </template>
        </el-table-column>
        <el-table-column label="商品价格" sortable align="center" prop="price">
        </el-table-column>
        <el-table-column align="center">
          <template slot="header" scope="scope">
            <el-button
              style=""
              class="browserButton"
              @click="dialogFormVisiblee = true"
              ><i class="el-icon-plus"></i>添加商品</el-button
            >
            <el-dialog
              title="添加商品"
              :visible.sync="dialogFormVisiblee"
              width="40%"
              center
            >
              <el-form :model="newshop" ref="newshop">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="newshop.name"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="商品图片" :label-width="formLabelWidth">
                  <el-upload
                    class="avatar-uploader"
                    action="http://47.98.246.42:8080/Oss/upload/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img
                      v-if="newshop.photo"
                      :src="newshop.photo"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="商品价格" :label-width="formLabelWidth">
                  <el-input
                    v-model="newshop.price"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="商品库存" :label-width="formLabelWidth">
                  <el-input v-model="newshop.num" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button class="deleteButton" @click="cancell">取 消</el-button>
                <el-button class="browserButton" @click="add">确 定</el-button>
              </div>
            </el-dialog>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              class="editButton"
              style="margin-right: 10px"
              @click="handleEdit(scope.$index, scope.row)"
              ><i class="el-icon-edit">编辑</i></el-button
            >
            <el-dialog
              title="更新商品"
              :visible.sync="dialogFormVisible"
              width="40%"
              center
            >
              <el-form :model="shop" ref="shop">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="shop.shopName"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="商品图片" :label-width="formLabelWidth">
                  <el-image
                    :src="shop.photo"
                    style="width: 100px; height: auto"
                    autocomplete="off"
                    title="商品图片"
                    alt="图片加载失败"
                  ></el-image>
                </el-form-item>
                <el-form-item label="商品价格" :label-width="formLabelWidth">
                  <el-input v-model="shop.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品库存" :label-width="formLabelWidth">
                  <el-input v-model="shop.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上架时间" :label-width="formLabelWidth">
                  <span autocomplete="off">{{ shop.gmtCreate }}</span>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel('shop')">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
              </div>
            </el-dialog>
            <el-button
              size="mini"
              class="deleteButton"
              @click="handleDelete(scope.$index, scope.row)"
              ><i class="el-icon-delete">删除</i></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #ddd9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 2px solid rgb(221, 230, 236);
  border-radius: 5px;
}
.avatar {
  width: 150px;
  height: auto;
  display: block;
}
</style>

<script>
import { getShopList, addShop, deleteShop, updateShop } from "@/api/shop";
export default {
  data() {
    return {
      tableData: [],
      srclist: [],
      search: "",
      dialogFormVisible: false,
      dialogFormVisiblee: false,
      newshop: {
        name: "",
        photo: "",
        num: null,
        price: null,
        shopperName: "",
        title: "",
        userId: 1,
        sortId: 3,
        shopperId: 1,
      },
      formLabelWidth: "120px",
      shop: {},
    };
  },
  mounted() {},
  created() {
    getShopList().then((res) => {
      console.log(res);
      this.tableData = res.data.list;
      this.tableData.forEach((item) => {
        this.srclist.push(item.photo);
      });
    });
  },
  methods: {
    handleAvatarSuccess(res, file) {
      // console.log(res);
      this.newshop.photo = res.data.url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    add() {
      addShop(this.newshop).then((res) => {
        getShopList().then((res) => {
          this.tableData = res.data.list;
          this.tableData.forEach((item) => {
            this.srclist.push(item.photo);
            this.dialogFormVisiblee = false;
          });
        });
      });
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.shop = row;
    },
    handleDelete(index, row) {
      deleteShop(row.id).then((res) => {
        this.$message.success("删除成功");
        getShopList().then((res) => {
          this.tableData = res.data.list;
          this.tableData.forEach((item) => {
            this.srclist.push(item.photo);
          });
        });
      });
    },
    submitForm() {
      this.$delete(this.shop, "gmtCreate");
      this.$delete(this.shop, "gmtModified");
      console.log(this.shop);
      updateShop(this.shop).then((res) => {
        this.$message.success("修改成功");
        this.dialogFormVisible = false;
      });
    },
    cancel(shop) {
      this.dialogFormVisible = false;
      this.$refs.shop.resetFields();
    },
    cancell() {
      this.dialogFormVisiblee = false;
      this.newshop = this.$options.data().newshop;
    },
  },
};
</script>